/**
 * Created by Administrator on 2017/6/29.
 */


import React from 'react'
import {View,Text,FlatList,TouchableOpacity,Image,TouchableHighlight} from 'react-native'

let REQUEST_URL = 'http://caifang.wenweikeji.com/merchant/selectNotice'
export default class MessageList extends React.Component{

    static navigationOptions = ({navigation}) =>{
        const {goBack,navigate} = navigation;
        return{
            headerStyle: {
                height: 70,
                backgroundColor: '#F1982F',
            },
            title: '消息',
            headerTitleStyle: {
                color: '#FFFFFF',
                alignSelf: 'center',
                marginTop: 25,
                marginLeft: -10,
            },
            headerLeft: <TouchableOpacity style={{marginLeft: 10, marginTop: 25}} onPress={() => goBack()}>
                <Image source={require('../.././Img/btn_fanhui@2x.png')}/>
            </TouchableOpacity>
        }
    }

    _keyExtractor = (item,index) => item.id; // FlatList给每一个Item设置一个唯一的键值
    constructor(props){
        super(props)
        this.state={
            messageList:[]
        }
    }

    render(){
        if(!this.state.messageList){
           return this._renderLoadView()
        }
        return this._renderContentView()
    }

    _fetchData(){
        fetch(REQUEST_URL,{
            method:'GET',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'Authorization': 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHQiOjE0OTkxMzkyMzQzMTMsInVpZCI6IjEzNTY2NjY2NjY2IiwiaWF0IjoxNDk4NjQ0NjM1MTIwfQ.GSJMrn4_G59kYUDurCQ_l9CgBkCmcNmE8y8jIcI9eqk',
            },
        })
            .then((responseData) =>{

                let data = JSON.parse(responseData._bodyInit)
                this.setState({
                    messageList:data.data
                })
            })
            .catch((error)=>{
                console.log(error.toString())
            })
    }

    componentDidMount() {
        console.log('componentDidMount')
        this._fetchData();
    }


    _renderLoadView(){
        return(
            <View style={{flex:1}}>
                <Text style={{flex:1}}>加载中,请稍后...</Text>
            </View>
        )
    }

    _renderContentView(){
        return(
            <FlatList
                data={this.state.messageList}
                keyExtractor={this._keyExtractor}
                renderItem={({item}) => this._renderCustomItem(item)}/>
        )
    }

    _renderCustomItem(item){
        return(
            <TouchableHighlight onPress={()=>this.props.navigation.navigate('messageDetails',{'user':item})}>
            <View key={item.id} style={{width:'100%',flexDirection:'column',backgroundColor:'#fff'}}>
                <View style={{marginTop:12,flexDirection:'row',justifyContent:'space-between'}}>
                    <Text style={{marginLeft:16}}>{item.title}</Text>
                    <Text style={{marginRight:16}}>{item.createdAt}</Text>
                </View>
                <Text style={{marginLeft:16, marginRight:16,marginBottom:12, marginTop:6}} numberOfLines={1}>{item.content}</Text>
            </View>
            </TouchableHighlight>
        )
    }
}